<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script src="../js/vue.js"></script>
	<div id="app">
		<p>{{count1}}</p>
		<button v-on:click="add1">+</button>
		<button v-on:click="sub1">-</button>
		<!--语法糖写法-->
		<p>{{count2}}</p>
		<button @click="add2">+</button>
		<button @click="sub2">-</button>
	</div>
<script>
	const app=new Vue({
		el:'#app',
		data:{
			count1:0,
			count2:0,
		},
		methods:{
			add1:function () {
					this.count1++;
			},
			sub1:function () {
					this.count1--;
			},
			add2:function () {
					this.count2++;
			},
			sub2:function () {
					this.count2--;
			}
		}
	})
</script>
</body>
</html>